<template>
	<view>
		<scroll-view scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrllinto" class="scroll-row">
			<view v-for="v,ind in tabB" :key="ind" :class="v.id==tanindex?'qita shouy':'qita'" :id="'tab'+ind" class="scroll-row-item py-2 px-4" @click="biao(v.id)">{{ v.title }}</view>
		</scroll-view>
		<swiper :style="'height:'+wheigh+'px'" :indicator-dots="false" :current="tanindex" :autoplay="false" :interval="1000" @change="huadong">
			<swiper-item v-for="v,index in tabB" :key="index" >
				
				<scroll-view scroll-y="true" :style="'height:'+wheigh+'px'"
				@scrolltolower="tolower(index)">
					<!-- <view v-for="val,ni in now" :key="ni"> -->
						<template v-if="now[tanindex].list.length>0">
							
						
						<view class="p-2" v-for="item,lindex in now[tanindex].list" :key="lindex">
							<common-lists :item="item" :lindex="lindex" ></common-lists>
						</view>
						
						<view class="flex align-center justify-center py-3">
							<text class="font text-muted" v-if="now[tanindex].xians">{{ now[tanindex].numgdL }}</text>
							<text class="font text-muted uni-icon uniui-spinner-cycle" v-else>{{ now[tanindex].numgdL }}</text>
						</view>
						</template>
						<template v-else>
							<view class="flex flex-column align-center justify-center">
								<image src="../../static/demo/topicpic/12.jpeg" class="py" style="border-radius:100% ;" mode=""></image>
								没有数据</view>
						</template>
						<load-more :loadmore="now[tanindex].numgdL"></load-more>
						
						
						
						
					<!-- </view> -->
				</scroll-view>
			</swiper-item>
			
		</swiper>
	</view>
</template>

<script>
	import loadMore from '@/components/common/load-more.vue';
	import commonLists from '@/components/common/common-lists.vue';
	export default {
		components:{
			loadMore,
			commonLists
		},
		data() {
			return {
				scrllinto:"",
				tanindex:0,
				wheigh:600,
				guanz: true,
				tabB:[
					{title:"关注",id:0},
					{title:"世界",id:1},
					{title:"体育",id:2},
					{title:"社会",id:3},
					{title:"明星",id:4},
					{title:"军事",id:5},
					// {title:"科学",id:6},
					// {title:"百科",id:7},
					// {title:"动物",id:8},
					// {title:"人文",id:9},
					// {title:"八卦",id:10},
					// {title:"日历",id:11},

				],
				now:[{
					numgdL:'加载更多。。。。',
					xians:true,
					list:[
							{title:'这是标题111',guanz: false,img:'/static/demo/userpic/1.jpg',nc:'小红',date:'2024-09-19',image:'/static/demo/demo2.jpg',dz:12,ndz:10,fx:5},
							{title:'这是ni好',guanz: true,img:'/static/demo/userpic/2.jpg',nc:'张三',date:'2024-09-17',image:'/static/demo/demo1.jpg',dz:12,ndz:10,fx:5},
							{title:'小可爱',guanz: true,img:'/static/demo/userpic/3.jpg',nc:'李四',date:'2024-09-16',image:'/static/demo/demo4.jpg',dz:12,ndz:10,fx:5}
					]
				},
				{
					numgdL:'加载更多。。。。',
					xians:true,
					list:[
							{title:'这是标题222',guanz: true,img:'/static/demo/userpic/1.jpg',nc:'小红',date:'2024-09-19',image:'/static/demo/demo2.jpg',dz:12,ndz:10,fx:5},
							{title:'这是ni好',guanz: true,img:'/static/demo/userpic/2.jpg',nc:'张三',date:'2024-09-17',image:'/static/demo/demo1.jpg',dz:12,ndz:10,fx:5},
							{title:'小可爱',guanz: true,img:'/static/demo/userpic/3.jpg',nc:'李四',date:'2024-09-16',image:'/static/demo/demo4.jpg',dz:12,ndz:10,fx:5}
					]
				},
				{
					numgdL:'加载更多。。。。',
					xians:true,
					list:[
							// {title:'这是标题4444',guanz: true,img:'/static/demo/userpic/1.jpg',nc:'小红',date:'2024-09-19',image:'/static/demo/demo2.jpg',dz:12,ndz:10,fx:5},
							// {title:'这是ni好',guanz: true,img:'/static/demo/userpic/2.jpg',nc:'张三',date:'2024-09-17',image:'/static/demo/demo1.jpg',dz:12,ndz:10,fx:5},
							// {title:'小可爱',guanz: true,img:'/static/demo/userpic/3.jpg',nc:'李四',date:'2024-09-16',image:'/static/demo/demo4.jpg',dz:12,ndz:10,fx:5}
					]
				},
				{
					numgdL:'加载更多。。。。',
					xians:true,
					list:[
							{title:'这是标题5555',guanz: true,img:'/static/demo/userpic/1.jpg',nc:'小红',date:'2024-09-19',image:'/static/demo/demo2.jpg',dz:12,ndz:10,fx:5},
							{title:'这是ni好',guanz: true,img:'/static/demo/userpic/2.jpg',nc:'张三',date:'2024-09-17',image:'/static/demo/demo1.jpg',dz:12,ndz:10,fx:5},
							{title:'小可爱',guanz: true,img:'/static/demo/userpic/3.jpg',nc:'李四',date:'2024-09-16',image:'/static/demo/demo4.jpg',dz:12,ndz:10,fx:5}
					]
				},
				{
					numgdL:'加载更多。。。。',
					xians:true,
					list:[
							{title:'这是标题666',guanz: true,img:'/static/demo/userpic/1.jpg',nc:'小红',date:'2024-09-19',image:'/static/demo/demo2.jpg',dz:12,ndz:10,fx:5},
							{title:'这是ni好',guanz: true,img:'/static/demo/userpic/2.jpg',nc:'张三',date:'2024-09-17',image:'/static/demo/demo1.jpg',dz:12,ndz:10,fx:5},
							{title:'小可爱',guanz: true,img:'/static/demo/userpic/3.jpg',nc:'李四',date:'2024-09-16',image:'/static/demo/demo4.jpg',dz:12,ndz:10,fx:5}
					]
				},
				{
					numgdL:'加载更多。。。。',
					xians:true,
					list:[
							{title:'这是标题777',guanz: true,img:'/static/demo/userpic/1.jpg',nc:'小红',date:'2024-09-19',image:'/static/demo/demo2.jpg',dz:12,ndz:10,fx:5},
							{title:'这是ni好',guanz: true,img:'/static/demo/userpic/2.jpg',nc:'张三',date:'2024-09-17',image:'/static/demo/demo1.jpg',dz:12,ndz:10,fx:5},
							{title:'小可爱',guanz: true,img:'/static/demo/userpic/3.jpg',nc:'李四',date:'2024-09-16',image:'/static/demo/demo4.jpg',dz:12,ndz:10,fx:5}
					]
				}
				]
			}
		},
		// 搜索框点击触发
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url:"/pages/seach/seach"
			})
		},
		onLoad(){
			uni.getSystemInfo({
				success(res) {
					this.wheigh = res.windowHeigh - uni.upx2px(100);
					console.log(res)
				}
			})
			console.log(this.now[0].list)
		},
		methods: {
			huadong(e){
				this.biao(e.detail.current)
				console.log(e.detail.current)
			},
			biao(e){
				this.tanindex = e;
				this.scrllinto = 'tab'+e
			},
			guanzhu(e){
				uni.showToast({
					title:"关注成功"
				})
				this.now[n].list[e].guanz = false
			},
			guanzhu2(e){
				uni.showToast({
					title:"关注取消"
				})
				this.now[n].list[e].guanz = true
			},
			touxiang(n,e){
				console.log(e)
				uni.navigateTo({
					url: '/pages/ceshi/user?id='+e
				});
			},
			tolower(e){
				console.log(e)
				let res = this.now[e];
				this.now[e].xians=false;
				this.now[e].numgdL = "加载中。。。"
				setTimeout(function() {
					res.list = [...res.list,...res.list]
					
					
					res.xians=true;
				}, 2000);
			}
		}
	}
</script>

<style>
	
@import "../../common/uni.css";
@import "../../common/free.css";
@import "../../common/animate.css";
.qita{
	font-size: 18rpx;
}
.shouy{
	font-size: 24rpx;
	font-weight: bold;
	color: hotpink;
}
.scroll-row{
	height: 100rpx;
}

</style>
